<template>
	<page-meta :root-font-size="fontSize"></page-meta>
	<view>
		<view class="status_bar bg-FF"></view>
		<view class="flex bg-FF pd-30" style="align-items: flex-start;">
			<h-navigateBack currentPage="TravelMode"></h-navigateBack>
			<view style="padding: 20rpx 40rpx 0 55rpx;">
				<view class="flex flex-ac" @click="selectSite('START')">
					<view class="circle-fill-blue"></view>
					<view class="fc-main v-start fs-32">{{ startPoint == '' ? '请选择上车点' : startPoint }}</view>
				</view>
				<view class="flex flex-ac">
					<view style="width: 500rpx;height: 1rpx;background-color: #EAEAEA;margin: 25rpx;"></view>
					<image src="../../static/home/change.png" style="width: 36rpx;" mode="widthFix" @click="exchange"></image>
				</view>
				<view class="flex flex-ac" @click="selectSite('END')">
					<view class="circle-fill-red"></view>
					<view class="fc-main v-start fs-32">{{ endPoint == '' ? '请选择下车点' : endPoint }}</view>
				</view>
			</view>
		</view>
		<!-- <view class="bg-FF" style="padding: 0 70rpx;"><u-tabs :list="list" font-size="32" :current="current" active-color="#F35A46" @change="change"></u-tabs></view> -->
		<view class="bg-FF flex flex-ac flex-bt" style="margin-top: 15rpx;padding:20rpx 30rpx;" v-if="show">
			<view class="flex flex-ac fs-28 fw-300">
				<view class="flex flex-ac flex-jc fs-26 circle-red">!</view>
				<view style="margin-left: 10rpx;">按照您的查询结果给您推荐线路</view>
			</view>
			<u-icon name="close" size="25" color="#9D9D9D" @click="show = false"></u-icon>
		</view>
		<view class="mg-30 pd-30 bg-FF border-r-20 " style="margin-top: 20rpx;letter-spacing: 4rpx;" @click="itemClick('车站班车',stationTicket)">
			<view class="flex flex-ac">
				<image src="../../static/home/station.png" style="width: 40rpx;height: 40rpx;"></image>
				<view class="fs-36 fw-800"  style="margin-left: 10rpx;">
					车站班车
					<text class="sqr">经济</text>
				</view>
				<view style="margin-left: 40rpx;">{{stationTicket.FullPrice || 0}}元&nbsp;&nbsp;&nbsp;&nbsp;{{stationTicket.Mileage || 0}}分钟</view>
			</view>
			<view style="display: flex;align-items: center;margin-top: 20rpx;">
				<view class="bluering"></view>
				<text class="jh_fs_28" style="color: #666666;margin-left: 0rpx;font-weight: 300;">{{stationTicket.ActualStartSiteName || '今日无班次'}}</text>
			</view>
						
			<view style="display: flex;align-items: center;margin-top: 20rpx;">
				<view class="redring"></view>
				<text class="jh_fs_28" style="color: #666666;margin-left: 0rpx;font-weight: 300;">{{stationTicket.ActualEndSiteName || '今日无班次'}}</text>
			</view>
			<view class="fc-666 fs-30" style="margin-top: 40rpx"><view>{{timeFormat(stationTicket.SetoutTime)}}发车&nbsp;&nbsp;{{stationTicket.Mileage}}公里</view></view>
		</view>
		<view class="mg-30 pd-30 bg-FF border-r-20 " style="margin-top: 20rpx;letter-spacing: 4rpx;" @click="itemClick('城际快车',intercityTicket)" v-if="intercityTicket">
			<view class="flex flex-ac">
				<image src="../../static/home/express.png" style="width: 40rpx;height: 40rpx;"></image>
				<view class="fs-36 fw-800 flex flex-ac"  style="margin-left: 10rpx;">
					城际快车
					<text class="sqr">最快</text>
				</view>
				
				<view style="margin-left: 40rpx;">约{{intercityTicket.FullPrice || 0}}元&nbsp;&nbsp;&nbsp;&nbsp;{{intercityTicket.Mileage || 0}}分钟</view>
			</view>
			<view style="display: flex;align-items: center;margin-top: 20rpx;">
				<view class="bluering"></view>
				<text class="jh_fs_28" style="color: #666666;margin-left: 0rpx;font-weight: 300;">{{intercityTicket.ActualStartSiteName || '今日无班次'}}</text>
			</view>
						
			<view style="display: flex;align-items: center;margin-top: 20rpx;">
				<view class="redring"></view>
				<text class="jh_fs_28" style="color: #666666;margin-left: 0rpx;font-weight: 300;">{{intercityTicket.ActualEndSiteName || '今日无班次'}}</text>
			</view>
			<view class="fc-666 fs-30" style="margin-top: 40rpx;"><view>{{timeFormat(intercityTicket.SetoutTime)}}发车&nbsp;&nbsp;{{intercityTicket.Mileage}}公里&nbsp;&nbsp;</view></view>
		</view>
		<view class="mg-30 pd-30 bg-FF border-r-20 " style="margin-top: 20rpx;letter-spacing: 4rpx;" @click="itemClick('定制巴士',customTicket)">
			<view class="flex flex-ac">
				<image src="../../static/home/bus.png" style="width: 40rpx;height: 40rpx;"></image>
				<view class="fs-36 fw-800" style="margin-left: 10rpx;">
					定制巴士
					<text class="sqr">便捷</text>
				</view>
				<view style="margin-left: 40rpx;">约{{customTicket.FullPrice}}元&nbsp;&nbsp;&nbsp;&nbsp;</view>
			</view>
			<view style="display: flex;align-items: center;margin-top: 20rpx;">
				<view class="bluering"></view>
				<text class="jh_fs_28" style="color: #666666;margin-left: 0rpx;font-weight: 300;">{{customTicket.ActualStartSiteName || '今日无班次'}}</text>
			</view>
						
			<view style="display: flex;align-items: center;margin-top: 20rpx;">
				<view class="redring"></view>
				<text class="jh_fs_28" style="color: #666666;margin-left: 0rpx;font-weight: 300;">{{customTicket.ActualEndSiteName || '今日无班次'}}</text>
			</view>
			<view class="fc-666 fs-30" style="margin: 40rpx  0 30rpx 0;;"><view>{{timeFormat(customTicket.SetoutTime)}}发车&nbsp;&nbsp;</view></view>
			<u-line></u-line>
			<!-- <view class="flex flex-ac fs-28 fw-300" style="margin-top: 20rpx;">
				<view class="flex flex-ac flex-jc fs-26 circle-blue">!</view>
				<view style="margin-left: 10rpx;">约8分钟一趟</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	var _self;
export default {
	data() {
		return {
			list: [
				{
					name: '智能'
				},
				{
					name: '客运'
				},
				{
					name: '城际快车'
				},
				{
					name: '定制班车'
				}
			],
			current: 0,
			show: true,
			startPoint: '延平',
			endPoint: '',
			orderInfo:'',//站点信息
			stationTicket:[],//客运数组
			intercityTicket:[],//城际快车数组
			customTicket:[],//定制巴士数组
			startLatitude:'',
			startLongitude:'',
			endLatitude:'',
			endLongitude:'',
			fontSize:''
		};
	},
	onLoad(params){
		_self = this;
		_self.fontSize = getApp().globalData.fontSize;
		_self.orderInfo = JSON.parse(params.stationInfo);
		console.log(_self.orderInfo);
		_self.startPoint = _self.orderInfo.startStation;
		_self.endPoint = _self.orderInfo.endStation;
		_self.startLatitude = _self.orderInfo.startLatitude;
		_self.startLongitude = _self.orderInfo.startLongitude;
		_self.endLatitude = _self.orderInfo.endLatitude;
		_self.endLongitude = _self.orderInfo.endLongitude;
		_self.GetTravelmodeBySite();
	},
	onShow() {
		var that=this;
		// uni.$once('START', function(data) { that.startPoint=data});
		// uni.$once('END', function(data) {that.endPoint=data});
	},
	methods: {
		change(e) {
			this.current = e;
		},
		exchange() {
			var e = this.startPoint;
			this.startPoint = this.endPoint;
			this.endPoint = e;
		},
		selectSite(type) {
			// uni.navigateTo({
			// 	url: './SelectSite?type=' + type
			// });
			//监听事件,监听下个页面返回的值
			uni.$on('mapStaionChange', function(data) {
				console.log(data);
				if(type == 'START'){
					_self.startPoint = data.StationName;
					_self.startLatitude = data.StationLocation.split(',')[1];
					_self.startLongitude = data.StationLocation.split(',')[0];
				}else {
					_self.endPoint = data.StationName;
					_self.endLatitude = data.StationLocation.split(',')[1];
					_self.endLongitude = data.StationLocation.split(',')[0];
					_self.GetTravelmodeBySite();
				}
			    //清除监听，不清除会消耗资源
			    uni.$off('mapStaionChange');
			});
			uni.navigateTo({
				url:'../../pages_IntercityExpress/stationPicker/express/expressStationPicker'
			})
		},
		//-------------------------------时间转换-------------------------------
		timeFormat(date) {
			if(date){
				var setTime = date.replace('T',' ');
				return setTime.substring(0, 16);
			}
		},
		//-------------------------------获取班次-------------------------------
		GetTravelmodeBySite:function(){
			uni.showLoading({
				title:'正在加载...'
			})
			var data = {
				appSystemCode:_self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode,
				StartSite:_self.startPoint,
				EndSite:_self.endPoint,
				StarLongitude:_self.startLongitude,
				StarLatitude:_self.startLatitude,
				EndLongitude:_self.endLongitude,
				EndLatitude:_self.endLatitude,
				ExecuteDate:''
			}
			console.log(data);
			uni.request({
				url:_self.$h.expressInterface.expressInterface.GetTravelmodeBySite.url,
				method:_self.$h.expressInterface.expressInterface.GetTravelmodeBySite.method,
				header:_self.$h.expressInterface.expressInterface.GetTravelmodeBySite.header,
				data:{
					appSystemCode:_self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode,
					StartSite:_self.startPoint,
					EndSite:_self.endPoint,
					StarLongitude:_self.startLongitude,
					StarLatitude:_self.startLatitude,
					EndLongitude:_self.endLongitude,
					EndLatitude:_self.endLatitude,
					ExecuteDate:''
				},
				success: (res) => {
					uni.hideLoading();
					console.log(res);
					if (res.data.Success) {
						// _self.latestData = JSON.parse(res.data.Data)
						_self.stationTicket = JSON.parse(res.data.Data).stationTicket;
						_self.intercityTicket = JSON.parse(res.data.Data).intercityTicket;
						_self.customTicket = JSON.parse(res.data.Data).customTicket;
					}
				},
				fail(res) {
					console.log(res)
					uni.hideLoading();
				}
			})
		},
		//-------------------------------------------选择班次-------------------------------------------
		itemClick:function(type,params){
			console.log(params);
			
			var stationInfo = {
				type:type,
				selectDate:_self.orderInfo.selectDate,
				startStation:params.StartSiteName,
				endStation:params.EndSiteName,
				ActualStartSiteName:params.ActualStartSiteName,
				ActualEndSiteName:params.ActualEndSiteName,
				PlanStartSiteName:params.PlanStartSiteName,
				PlanEndSiteName:params.PlanEndSiteName,
			}
			uni.navigateTo({
				url:'../../pages_IntercityExpress/Order/ConfirmOrder?stationInfo=' + JSON.stringify(stationInfo)
			})
		},
	}
};
</script>

<style>
.circle-fill-blue {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: #19a0ff;
}
.circle-fill-red {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: #fc4646;
}
.circle-blue {
	width: 35rpx;
	height: 35rpx;
	border-radius: 50%;
	border: solid 1rpx #1ea2ff;
	color: #1ea2ff;
}
.circle-red {
	width: 35rpx;
	height: 35rpx;
	border-radius: 50%;
	border: solid 1rpx #f35a46;
	color: #f35a46;
}
.v-start {
	margin-left: 25rpx;
	width: 500rpx;
}
.border-r-20 {
	border-radius: 20rpx;
}
.sqr {
	border: solid 1rpx #1ea2ff;
	color: #1ea2ff;
	padding: 0 10rpx;
	border-radius: 6rpx;
	margin-left: 20rpx;
	font-size: 24rpx;
	font-weight: 400;
}
.bluering {
		width: 8rpx;
		height: 8rpx;
		border: 4rpx solid #06B4FD;
		background: #06B4FD;
		border-radius: 100%;
		margin: 0rpx 20rpx;
	}
	
	.redring {
		width: 8rpx;
		height: 8rpx;
		border: 4rpx solid #FC4646;
		background: #FC4646;
		border-radius: 100%;
		margin: 0rpx 20rpx;
	}
</style>
